<!--
 * @Author: your name
 * @Date: 2021-03-12 14:54:21
 * @LastEditTime: 2021-04-12 15:22:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \test\src\components\login\login.vue
-->
<template>
    <div class="login_container">
        <div class="login_box">
            <!-- 登录表单区域 -->
            <div class="login_form">
                <img src="../../assets/login.png" class="imgRe">
                <!-- <el-form label-width="0px" ref="loginFormRef" :model="loginForm" :rules="loginFormRules"> -->
                <el-form label-width="70px" ref="loginFormRef" :model="loginForm">
                    <!-- 用户名 -->
                    <el-form-item prop="username" label="用户名">
                        <el-input v-model="loginForm.userName" prefix-icon="icon iconfont my-iconuser"></el-input>
                    </el-form-item>
                    <!-- 密码 -->
                    <el-form-item prop="password" label="密码">
                        <el-input v-model="loginForm.userPassword" prefix-icon="icon iconfont my-iconPassword" type="password"></el-input>
                    </el-form-item>
                    <el-form-item prop="userAgainPasaword" label="确认密码">
                        <el-input v-model="loginForm.userAgainPasaword" prefix-icon="icon iconfont my-iconPassword" type="password"></el-input>
                    </el-form-item>
                    <!-- 按钮 -->
                    <el-form-item class="login_btns">
                        <el-button type="info" @click="register()" class="registerBtn">注册</el-button>
                        <router-link to="login" class="loginBtn">已有账号，去登录</router-link>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import { userRegister } from '../../api/apply-info'
export default {
  data () {
    return {
      loginForm: { // 登录表单
        userName: '',
        userPassword: '',
        userAgainPasaword: ''
      },
      userForm: {
        userId: '',
        userName: ''
      }
    }
  },
  methods: {
    // 点击重置登录表单
    register () {
      if (this.loginForm.userName !== '' && this.loginForm.userPassword !== '' && this.loginForm.userAgainPasaword !== '') {
        userRegister(this.loginForm).then(res => {
          console.log('register res', res)
          this.$message(res.data.message)
          if (res.data.message === '注册成功') {
            // 将用户名放入sessionStorage
            sessionStorage.setItem('userName', res.data.data.userName)
            sessionStorage.setItem('userId', res.data.data.id)
            this.$router.push({ path: '/basicInfo' })
          }
        })
      } else {
        this.$message('用户名或密码不能为空')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.login_container{
    background-color: #7196b1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../../assets/bk1.jpeg');
    background-size:100%;
    background-repeat:no-repeat;
    .login_box{
        width: 450px;
        height: 300px;
        margin-left: 50%;
        background-color: #fff;
        border-radius: 3px;
        position: relative;
        top: 100px;
        .login_form{
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 20px 20px;
            box-sizing: border-box;
            .login_btns{
              .loginBtn{
                margin-left: 150px;
              }
            }
        }
    }
}
</style>
<style>
body{
  background-image: url('../../assets/bg3.jpeg');
  background-size: 100% 1000px;
  background-repeat: no-repeat;
}
.el-icon-switch-button {
  color: #e4252d;
  font-size: 17px;
  font-weight: bolder;
}
</style>
